@import "kpStyle";
.content {
    padding:  24*@px;
    box-sizing: border-box; 
  }
  .content .bankCard {
    height: 270*@px;
    width: 100%;
    position: relative;
    padding:  24*@px;
    box-sizing: border-box; 
  }
  .content .bankCard>img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .content .bankCard .main{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    padding: 24*@px;
    box-sizing: border-box;
  }
  .content .bankCard .main .top{
    border-bottom: 1*@px solid white;
    height: 80*@px;
    position: relative;
    padding-bottom: 24*@px;
  }
  .bankCard .main .top>img{
    height: 44*@px;
    width: 44*@px;
    border-radius: 50%;
    position: absolute;
    left: 0*@px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  .bankCard .main .top .name{
    position: absolute;
    left: 64*@px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  .bankCard .main .top .name>text{
    display: block;
    font-size: 28*@px;
    line-height: 38*@px;
    color: white;
  }
  .bankCard .main .top{
    font-size: 28*@px;
    line-height: 104*@px;
    color: white;
  }
  .bankCard .main .bottom{
    height: 126*@px;
    width: 100%;
    position: relative;
    font-size: 26*@px;
    color: white;
    line-height: 46*@px;
  }
  .bankCard .main .bottom>div{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  .bankCard .main .bottom>div:last-of-type{
    right: 0;
  }
  .bankCard .main .bottom>div text{
    display: block;
  }
  
  .content .box{
    padding: 12*@px;
    box-sizing: border-box;
  }
  .content .box>div{
    padding: 24*@px 10*@px 24*@px 24*@px;
    box-sizing: border-box;
    background-color: white;
    width: 100%;
    border-radius: 20*@px;
  }
  .content .box .li{
    height: 80*@px;
    line-height: 80*@px;
    display: flex;
    margin-bottom: 14*@px;
  }
  .content .box .li:last-of-type{
    margin-bottom: 0;
  }
  .content .box .li img{
    width: 64*@px;
    height: 64*@px;
    float: right;
    margin-top: 8*@px;
  }
  .content .box .li  input{
    flex: 1;
    font-size: 28*@px;
    border: 1*@px solid #ccc;
    box-sizing: border-box;
    height: 100%;
    padding-left: 14*@px;
    background-color: white;
    color: black;
  }
  .content .preview{
    padding: 12*@px;
    box-sizing: border-box;
  }
  .content .preview>div{
    padding: 24*@px 10*@px 24*@px 24*@px;
    box-sizing: border-box;
    background-color: white;
    width: 100%;
    border-radius: 20*@px;
    font-size: 26*@px;
    line-height: 38*@px;
  }
  .content .preview>div .btn{
    width: 90%;
    height: 70*@px;
    line-height: 70*@px;
    text-align: center;
    border-radius: 35*@px;
    color: white;
    font-size: 30*@px;
    background-color: #ccc;
    margin: 40*@px auto 0*@px;
  }
  .red{
    background-color: #ef5853 !important;
  }
  
  /*模板  */
  .template{
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .template .main{
    position:fixed;
    bottom: 0;
    left: 0;
    background-color: #e4e4e4;
    width: 100%;
    font-size: 28*@px;
    text-align: center;
  }
  .template .main>text{
    height: 80*@px;
    line-height: 80*@px;
    display: block;
    border-bottom: 1*@px solid #ececec;
    background-color: white;
  }
  .template .main .list{
    max-height: 2.4rem;
    overflow-y: scroll;
    background-color: white;
  }
  .template .main .list .li{
    height: 80*@px;
    line-height: 80*@px;
    border-bottom: 1*@px solid #ececec;
  }
  .template .main .list .li:last-of-type{
    border-bottom: none;
  }
  .template .main .cancel{
    height: 80*@px;
    line-height: 80*@px;
    margin-top: 14*@px;
    background-color: white;
  }
  
  /*日历模板  */
  .calendarTem{
    display: none;
    z-index: 99;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .calendarTem .box{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    background-color: white;
    width: 700*@px;
    font-size: 28*@px;
    border-radius: 20*@px;
    text-align: center;
  }
  .calendarTem .box .years{
    text-align: center;
    line-height: 80*@px;
    position: relative;
  }
  .calendarTem .box .years .left{
    width: 45*@px;
    height: 45*@px;
    position: absolute;
    top: 17*@px;
    left: 40*@px;
  }
  .calendarTem .box .years .right{
    width: 45*@px;
    height: 45*@px;
    position: absolute;
    top: 17*@px;
    right: 40*@px;
  }
  .calendarTem .box .week{
    display: flex;
    font-size: 26*@px;
    height: 46*@px;
    line-height: 46*@px;
    text-align: center;
  }
  .calendarTem .box .week>div{
    flex: 1;
    border-right: 1*@px solid #ddd;
    border-bottom: 1*@px solid #ddd;
  }
  .calendarTem .box .week>div:last-of-type{
    border-right: none;
  }
  .calendarTem .box .list{
    display: flex;
    flex-wrap: wrap;
  }
  .calendarTem .box .list>div{
    width: 100*@px;
    height: 100*@px;
    line-height: 100*@px;
    border-right: 1*@px solid #ddd;
    border-bottom: 1*@px solid #ddd;
    box-sizing: border-box;
    color: #aaa;
    position: relative;
  }
  .optional{
    color: #000 !important ;
  }
  .selected::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    width: 70%;
    height: 70%;
    background-color:rgba(255,0,0,1);
    border-radius: 50%;
    z-index: -100;
    
  }
  .calendarTem .box .list .last>div{
    border-bottom: none;
  }
  .calendarTem .box .suggest{
    padding: 0 24*@px;
    box-sizing: border-box;
    text-align: left;
    font-size: 26*@px;
    color: #ef5853 ;
    line-height: 36*@px;
    margin: 20*@px 0;
    text-align: center;
  }
  .calendarTem .box .cancelOrbtn{
    display: flex;
    height: 80*@px;
    line-height: 80*@px;
    text-align: center;
    border-top: 1*@px solid #ddd;
  }
  .calendarTem .box .cancelOrbtn>div{
    flex: 1;
  }
  .calendarTem .box .cancelOrbtn .btn{
    border-left: 1*@px solid #ddd;
    color: #ef5853;
  }